<template>
  <div>
    <ul class="img-list">
      <li style="position: relative" v-if="modelValue" :style="{
        width: props.width + 'px',
        height: props.height + 'px'
      }">
        <div>
          <el-image :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-teleported="true"
            :preview-src-list="[modelValue]" :src="modelValue" lazy />
          <span class="img-del-x">
            <el-icon @click="handleRemove()">
              <CloseBold />
            </el-icon>
          </span>
        </div>
      </li>
      <li v-if="modelValue == ''" :style="{
        width: props.width + 'px',
        height: props.height + 'px'
      }">
        <div @click="handleOpen" class="avatar-uploader-icon">
          <Plus />
        </div>
      </li>
    </ul>
    <KoiDialog ref="koiDialogRef" title="附件管理" footer-hidden :width="props.dialogWidth+''" :height="props.dialogHeight+''">
      <template #content>
        <ColeAttachmentDialog :can-uploaded-num="modelValue?0:1" :can-selected-limit="limit"
          :type="props.type" :already-selected="0" @handle-submit="handleSubmit"></ColeAttachmentDialog>
      </template>
    </KoiDialog>
  </div>
</template>

<script setup lang="ts" name="ColeAttachment">
import { ref, watch } from "vue";
import ColeAttachmentDialog from "./components/ColeAttachmentDialog.vue";

const koiDialogRef = ref();
const emits = defineEmits(["update:file"]);

interface IAttachmentProps {
  file?: any; //文件数组对象 [url1,url2] 或者字符串
  type?: any; //图片image / 视频 video
  width?: number; //图片宽度
  height?: number; //图片高度
  dialogWidth?: number; //弹窗宽度
  dialogHeight?: number; //弹窗高度
}

// 子组件接收父组件的值
// withDefaults：设置默认值  defineProps：接收父组件的参数
const props = withDefaults(defineProps<IAttachmentProps>(), {
  file: "",
  dialogWidth: 1400,
  dialogHeight: 700,
  type: "image",
  width: 120,
  height: 120,
});
const modelValue = ref(props.file);
const limit = 1;

watch(
  () => [props.file],
  () => {
    // 父组件传递回显数据
    modelValue.value = props.file;
  }
);

const handleSubmit = (files: any) => {
  koiDialogRef.value.koiClose();
  modelValue.value = files.length > 0 ? files[0].url : "";
  emits("update:file", modelValue.value);
};
const handleOpen = () => {
  koiDialogRef.value.koiOpen();
};

const handleRemove = () => {
  modelValue.value = "";
  emits("update:file", modelValue.value);
};
</script>

<style lang="scss" scoped>
.avatar-uploader-icon {
  width: 100%;
  height: 100%;
  color: #8c939d;
  text-align: center;
  border: 2px dashed var(--el-color-primary);
  border-radius: 5px;
}

.img-list {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.img-list li {
  width: 120px;
  height: 120px;
  margin-right: 10px;
  display: inline-block;
  text-align: center;
  border-radius: 5px;
}

.img-list img {
  border-radius: 5px;
}

.img-del-x {
  position: absolute;
  z-index: 100;
  top: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  font-size: 16px;
  line-height: 16px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  background: hsla(0, 0%, 60%, 0.6);
  border-radius: 10px;
}
</style>
